<template>
	<view class="rank">
		<view class="rank__nav">
			<view :class="['nav__item', navIndex===index?'nav__item--active':'']" 
			v-for="(item, index) in navList" :key="index" @click="navClick(index)">
				<text class="item__title">{{item}}</text>
				<text class="item__line"></text>
			</view>
		</view>
		<!-- 深度盘口 -->
		<view class="rank__main" v-if="navIndex===0">
			<view class="main__list" v-if="handicapInfo.lower">
				<view class="list__item" v-for="(item, index) in handicapInfo.lower" :key="index">
					<view class="item__order">{{index+1}}</view>
					<view class="item__num">{{item.price | formatPrice}}</view>
					<view class="item__price">{{item.num}}</view>
				</view>
			</view>
		</view>
		<!-- 最新成交 -->
		<view class="rank__main" v-else>
			<view class="main__list main__right" v-if="handicapInfo.higher">
				<view class="list__item" v-for="(item, index) in handicapInfo.higher" :key="index">
					<view class="item__order">{{index+1}}</view>
					<view class="item__num">{{item.price | formatPrice}}</view>
					<view class="item__price">{{item.num}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				navList:[ this.$t('stock.buyTitle'),this.$t('stock.sellTitle')],
				navIndex:0,
			}
		},
		props:{
			handicapInfo:{ //盘口信息
				type:Object,
				default:()=>({})
			},
			dealRecords:{
				type:Array,
				default:()=>([])
			}
		},
		filters:{
			formatPrice(price){
					let num = price ? price * 1 : 0
					return num.toFixed(2)
			}
		},
		methods:{
			navClick(index){
				if(this.navIndex!==index){
					this.navIndex = index
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rank{
		margin-top: 30rpx;
		padding: 0 24rpx;
		padding-bottom: 30rpx;
		box-sizing: border-box;
		.rank__nav{
			@include flexRowAlign();
			.nav__item{
				flex: 1;
				@include flexCenter(column);
				.item__title{
					font-size: 36rpx;
					font-weight: 800;
					color: #fff;
				}
				.item__line{
					width: 30rpx;
					height: 4rpx;
					background: transparent;
					border-radius: 2rpx;
					margin-top: 6rpx;
				}
			}
			.nav__item--active{
				.item__title{
					color: #458EF4;
				}
				.item__line{
					background: #458EF4;
				}
			}
		}
		.rank__main{
			margin-top: 20rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			.main__list{
				max-height: 620rpx;
				overflow-y: scroll;
				background: rgba(#2DC065, 0.1);
				border-radius: 8rpx 0rpx 0rpx 8rpx;
				padding: 26rpx;
				box-sizing: border-box;
				.list__item{
					@include flexRowAlign();
					height: 58rpx;
					.item__order{
						width: 40rpx;
						height: 40rpx;
						background: #2DC065;
						border-radius: 6rpx;
						@include flexCenter();
						font-size: 26rpx;
						font-weight: 800;
						color: #FFFFFF;
					}
					.item__num{
						font-size: 26rpx;
						font-weight: 800;
						color: #2DC065;
						margin-left: 20rpx;
						flex: 1;
						text-align: center;
					}
					.item__price{
						flex: 1;
						text-align: center;
						font-weight: 800;
						font-size: 26rpx;
						color: #2DC065;
					}
				}
			}
			.main__right{
				background: rgba(#DF4140, 0.1);
				border-radius: 0rpx 8rpx 8rpx 0rpx;
				.list__item{
					.item__order{
						background: #DF4140;
					}
					.item__num{
						color: #DF4140;
					}
					.item__price{
						color: #DF4140;
					}
				}
			}
		}
		.rank__new{
			min-height: 300rpx;
			max-height: 620rpx;
			overflow-y: scroll;
			margin-top: 20rpx;
			background: rgba(#fff, 0.1);
			padding: 30rpx 40rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			.new__header{
				@include flexRowAlign();
				.header__text{
					flex: 1;
					text-align: center;
					color: #999999;
					font-size: 26rpx;
				}
			}
			.new__item{
				@include flexRowAlign();
				margin-top: 20rpx;
				.item__text{
					flex: 1;
					text-align: center;
					color: #fff;
					font-size: 26rpx;
				}
			}
		}
	}
</style>